<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>混合选择器</title>
    <style>
        /*
            多个选择器之间以逗号分隔
                表示这些匹配这些选择器匹配的一切元素
        */
        p,.c1{
            /*color:red;*/
        }

        /*
            父元素
                当前元素的上级元素
            子元素
                当前元素的下级元素
            祖先元素
                当前元素的父元素、父元素的父元素、父元素的父元素的父元素...
            后代元素
                当前元素的子元素、子元素的子元素、子元素的子元素的子元素...
         */
        .c2 span{
            color:green;
        }
        .c3>span{
            color: blue;
        }
        .c4+span{
            color:red;
        }
        .c5+span{
            color:green;
        }
        .c6~span{
            color:purple;
        }
    </style>
</head>
<body>
<h2>多个选择器之间以逗号分隔</h2>
<p>第1个段落</p>
<p>第2个段落</p>
<p>第3个段落</p>
<div class="c1">第1个div</div>
<div>第2个div</div>
<div class="c1">第3个div</div>
<div>第4个div</div>
<div>第5个div</div>

<h2>多个选择器之间以空格分隔</h2>
<div class="c2">
    <div>这是c2中的div
        <span>这是c2中的div中的span</span>
    </div>
    <span>这是c2中的span</span>
</div>
<h2>多个选择器之间以>分隔</h2>
<div class="c3">
    <div>这是c3中的div
        <span>这是c3中的div中的span</span>
    </div>
    <span>这是c3中的span</span>
</div>
<h2>多个选择器之间以+分隔</h2>
<div class="c4">
    <span>这是c4中的span</span>
</div>
<p>这是段落</p>
<span>这是c4后面的span</span><br>
<span>这是c4后面的span</span><br>
<span>这是c4后面的span</span><br>
<span class="c5">这是c5</span><br>
<span>这是c5后面的span</span><br>
<h2>多个选择器之间以~分隔</h2>
<div class="c6">这是c6</div>
<p>这是段落</p>
<span>这是c6后面的span</span><br>
<span>这是c6后面的span</span><br>
<span>这是c6后面的span</span><br>
<span>这是c6后面的span</span><br>
<span>这是c6后面的span</span><br>
</body>
</html>